<script setup lang="ts">
import { type PropType, computed, useSlots } from 'vue'
import { useStatusBar } from '@/hooks'
import { useNavBack } from '@/hooks/useNavBack'
enum TEXTALIGN {
  start,
  end,
  left,
  right,
  center,
  justify,
}
type TextAlign = keyof typeof TEXTALIGN

const $props = defineProps({
  icon: { type: String, default: 'arrow-left' },
  title: {
    type: String,
    default: '',
  },
  bgColor: {
    type: String,
    default: '#fff',
  },
  color: {
    type: String,
    default: '#000',
  },
  textAlign: { type: String as PropType<TextAlign>, default: 'center' },
  showBack: {
    type: Boolean,
    default: true,
  },
})
// 状态栏高度
let statusBarHeight = useStatusBar()

const pages = getCurrentPages()
const existTitleSlot = useSlots().title

const navBack = () => {
  useNavBack()
}
const isHome = computed(() => {
  return !pages[pages.length - 2]
})
</script>

<template>
  <view
    class="nav"
    :style="{
      height: `${statusBarHeight}px`,
      background: $props.bgColor,
      color: $props.color,
      textAlign: $props.textAlign,
    }"
  >
    <view class="nav__arrow" @click="navBack">
      <u-icon v-if="!isHome && $props.showBack" :name="$props.icon" size="36" />
    </view>
    <text v-if="!existTitleSlot">{{ $props.title }}</text>
    <slot v-else name="title"></slot>
  </view>
  <view :style="{ height: `${statusBarHeight}px` }"></view>
</template>

<style lang="scss" scoped>
@include b(nav) {
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  font-weight: 700;
  font-size: 30rpx;
  padding-bottom: 18rpx;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  background: #fff;
  z-index: 9999;
  @include e(arrow) {
    position: absolute;
    bottom: 24rpx;
    left: 4rpx;
    @include flex();
  }
}
@include b(right) {
  position: absolute;
  right: 35rpx;
  color: rgb(16, 16, 16) 100%;
  font-weight: normal;
  font-size: 28rpx;
  position: sticky;
}
</style>
